import Vue from 'vue'

const app = new Vue({
  // 如果el被注释，只执行beforeCreate和created
  // 否则按编号注释执行
  el: '#root',
  template: '<div>{{text}}</div>',
  data: {
    text: 0
  },
  // 1
  beforeCreate() {
    console.log(this.$el, 'beforeCreate') //undefined
  },
  // 2
  created() {
    console.log(this.$el, 'created') //undefined
  },
  // 3 与页面挂载有关系 3和4在服务端渲染不会被执行
  beforeMount() {
    console.log(this.$el, 'beforeMount') //<div id="root"></div>
  },
  // 4 与页面挂载有关系
  mounted() { //操作dom放在mounted，操作数据可以放在mounted或created
    console.log(this.$el, 'mounted') //<div>0</div>
  },
  beforeUpdate() {
    console.log(this, 'beforeUpdate')
  },
  updated() {
    console.log(this, 'updated')
  },
  activated() { // 在组件章节讲解
    console.log(this, 'activated')
  },
  deactivated() { // 在组件章节讲解
    console.log(this, 'deactivated')
  },
  beforeDestroy() {
    console.log(this, 'beforeDestroy')
  },
  destroyed() {
    console.log(this, 'destroyed')
  },
  render(h) {
    throw new TypeError('render error')
    // console.log('render function invoked')
    // return h('div', {}, this.text)
  },
  // 报错信息
  renderError(h, err) {
    return h('div', {}, err.stack)
  },
  errorCaptured() {
    // 会向上冒泡，并且正式环境可以使用
  }
})

app.$mount('#root')
// 1s后每次会执行beforeUpdate和updated
// setInterval(() => {
//   app.text = app.text += 1
// }, 1000)

setTimeout(() => {
  // 主动销毁组件 解绑事件监听和所有的watch
  app.$destroy()
}, 1000)
